<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
        <!-- 快捷导航 -->
<div class="shortcut">
    <div class="wrapper">
        <ul>
            <li><a href="http://www.baidu.com" class="login">小米网</a></li>
          
            <li><a href="#">MIUI</a></li>
          
            <li><a href="#">米聊</a></li>
          
            <li><a href="#">游戏</a></li>
          
            <li><a href="#">多看阅读</a></li>
          
            <li><a href="#">云服务</a></li>
            <li><a href="#">小米网移动版</a></li>
            <li><a href="#">问题反馈</a></li>
            <li><a href="#">Select Region</a></li>
          </ul>
    </div>
  
  </div>
   <!-- 头部 -->
<div class="header wrapper">
    <!-- logo -->
      <div class="logo"></div>
  <div class="logo1"></div>
      <!-- 导航 -->
      <div class="nav">
          <ul>
              <li><a href="#">小米手机</a></li>
            
              <li><a href="#">红米</a></li>
            
              <li><a href="#">平板</a></li>
            
              <li><a href="#">电脑</a></li>
            
              <li><a href="#">电视</a></li>
            
              <li><a href="#">盒子</a></li>
            
              <li><a href="#">影音</a></li>
            
              <li><a href="#">路由器</a></li>
            
              <li><a href="#">服务</a></li>

              <li><a href="#">社区</a></li>
            
            </ul>
      </div>
    </div>
       <!-- 轮播 -->
  <div class="banner">
    <div class="wrapper">
      <!-- 图片 -->
      <ul class="pic">
        <li><a href="#"><img src="./images/banner.png" alt=""></a></li>
      </ul>
      <!-- 侧导航 ul -->
<div class="subnav">
    <ul>
      <li>
        <div><a href="#" class="classify">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">路由器</a><a href="#">智能硬件</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">移动电源</a><a href="#">插线板</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">耳机</a><a href="#">音响</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">电池</a><a href="#">储存卡</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">保护套</a><a href="#">后盖</a><a href="#">洗护</a><a href="#">美妆</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">贴膜</a><a href="#">其他配件</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">米兔</a><a href="#">服装</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
  
      <li>
        <div><a href="#" class="classify">箱包</a><a href="#">其他周边</a><a href="#">图书</a></div>
  
        <span class="iconfont icon-arrow-right-bold"></span>
  
      </li>
      
    </ul>
  
  </div>
    </div>

</div>
<!-- 展示 -->
 <div class="newphone wrapper">
  <ul>
    <li class="one"><a href="#"><span>我就是一个空字块<br>一言不合就是这么任性</span></a></li>
    <li><a href="#"><img src="./images/pro1.png" alt=""></a></li>
    <li><a href="#"><img src="./images/pro2.png" alt=""></a></li>
    <li><a href="#"><img src="./images/pro3.png" alt=""></a></li>
  </ul>

 </div>
 <!-- 智能硬件 -->
  <div class="card wrapper">
    <div class="title">
      <span>智能硬件</span>
      <span>查看全部</span>
    </div>
    <div class="nav">
      <ul>
        <li class="lift">
         <div >
        <a href="#"><img src="./images/girl.jpg" alt=""></a>
      </div>
      </li>
      <li>
        <div>
          <a href="#">
            <div class="pic"><img src="./images/d1.jpg" alt=""></div>
            <div class="text">
              <div class="info">
                <h4>小米路由器3</h4>
                <p>四天线设计，更安全更快速</p>
              </div>
              <p class="price">149元</p>
            </div>
            <div>
              <a href="#">
                <div class="pic"><img src="./images/d5.jpg" alt=""></div>
                <div class="text">
                  <div class="info">
                    <h4>小米路由器3</h4>
                    <p>四天线设计，更安全更快速</p>
                  </div>
                  <p class="price">149元</p>
                </div>
              </a>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a href="#">
            <div class="pic"><img src="./images/d2.jpg" alt=""></div>
            <div class="text">
              <div class="info">
                <h4>小米路由器3</h4>
                <p>四天线设计，更安全更快速</p>
              </div>
              <p class="price">149元</p>
            </div>
            <div>
              <a href="#">
                <div class="pic"><img src="./images/d6.jpg" alt=""></div>
                <div class="text">
                  <div class="info">
                    <h4>小米路由器3</h4>
                    <p>四天线设计，更安全更快速</p>
                  </div>
                  <p class="price">149元</p>
                </div>
              </a>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a href="#">
            <div class="pic"><img src="./images/d3.jpg" alt=""></div>
            <div class="text">
              <div class="info">
                <h4>小米路由器3</h4>
                <p>四天线设计，更安全更快速</p>
              </div>
              <p class="price">149元</p>
            </div>
            <div>
              <a href="#">
                <div class="pic"><img src="./images/d7.jpg" alt=""></div>
                <div class="text">
                  <div class="info">
                    <h4>小米路由器3</h4>
                    <p>四天线设计，更安全更快速</p>
                  </div>
                  <p class="price">149元</p>
                </div>
              </a>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a href="#">
            <div class="pic"><img src="./images/d4.jpg" alt=""></div>
            <div class="text">
              <div class="info">
                <h4>小米路由器3</h4>
                <p>四天线设计，更安全更快速</p>
              </div>
              <p class="price">149元</p>
            </div>
            <div>
              <a href="#">
                <div class="pic"><img src="./images/d8.jpg" alt=""></div>
                <div class="text">
                  <div class="info">
                    <h4>小米路由器3</h4>
                    <p>四天线设计，更安全更快速</p>
                  </div>
                  <p class="price">149元</p>
                </div>
              </a>
            </div>
          </a>
        </div>
      </li>
    </ul>
     
     
      </div>
    </div>
  </div>
  <!-- 底部导航栏 -->
   <div class="bottomcut">
    <div class="wrapper">
      <ul>
        <li>
          <div>
            <p class="bt">帮助中心</p>
            <p>账户管理</p>
            <p>购物指南</p>
            <p>订单操作</p>
          </div>
        </li>
        <li>
          <div>
            <p class="bt">服务支持</p>
            <p>售后政策</p>
            <p>自助服务</p>
            <p>相关下载</p>
          </div>
        </li>
        <li>
          <div>
            <p class="bt">线下门店</p>
            <p>小米之家</p>
            <p>服务网点</p>
            <p>零售网点</p>
          </div>
        </li>
    <li>
          <div>
            <p class="bt">关于小米</p>
            <p>了解小米</p>
            <p>加入小米</p>
            <p>联系我们</p>
          </div>
        </li>
        <li>
          <div>
            <p class="bt">关注我们</p>
            <p>新浪微博</p>
            <p>小米邮箱</p>
            <p>官方微信</p>
          </div>
        </li>
        <li >
          <div>
            <p class="bt">特色服务</p>
            <p>F 码通道</p>
            <p>小米移动</p>
            <p>防伪查询</p>
          </div>
        </li>
        <li >
          <div class="num1">
            <p class="num">400-100-5678</p>
            <p >周一至周日 8:00-18:00</p>
            <p>(仅收市话费)</p>
          </div>
        </li>
      </ul>
    </div>
    
   </div>
</body>
</html>